<template>
  <div class='module'>
    <div class='titleModule'>
      <div class='title'>总盈亏对比</div>
      <div class='datePreIcon'></div>
      <a-radio checked></a-radio>
      <span class='timeModule relative'>
        <input type="text" ref="yearInput" class='timeModuleText' v-model="yearValue" @focus="openChooseBox(1)" @blur="openChooseBox()"/>
        <span class='timeModuleIcon'> &nbsp; <a-icon type='calendar' /></span>
        <div v-if="openChoose" class="absolute yaerChooseBox">
          <div class="header"><span @click="changeYearPage()" class="finger font18 color-blue" style="margin-right: 10px">&lt;&lt;</span>{{ new Date().getFullYear() }}<span class="font18 finger color-blue" @click="changeYearPage(1)" style="margin-left: 10px">&gt;&gt;</span></div>
          <div class="main">
            <template v-for="i in yearList">
              <div v-if="i <= new Date().getFullYear()" :key="i" class="finger" @click="chooseYaer(i, $event)">
                {{ i }}
              </div>
              <div v-else :key="i" style="color: #1870CA">
                {{ i }}
              </div>
            </template>
          </div>
        </div>
      </span>
    </div>
    <div ref='charDom' style='height:380px;width:750px;'></div>
  </div>
</template>

<script>
const echarts = require('echarts')

export default {
  props: ['dataList'],
  components: {},
  data(){
    return {
      currentNav: '',
      openChoose: false,
      yearValue: new Date().getFullYear(),
      changeYearPageStatus: false,
      yearList: [],
      myChart: null
    }
  },
  watch: {
    dataList () {
      this.getOption()
    }
  },
  created () {
    let tempArr = []
    for(let i = 0 ; i < 16 ; i++) {
      if (i < 9) {
        tempArr.push(this.yearValue - 9 + i)
      } else if (i > 9) {
        tempArr.push(this.yearValue - 9 + i)
      } else {
        tempArr.push(this.yearValue)
      }
    }
    this.yearList = tempArr
  },
  mounted(){
    this.myChart = echarts.init(this.$refs.charDom)
    if (!this.dataList.length) return
    this.getOption()
  },
  methods: {
    getOption () {
      let data = this.getData()
      let max = Math.ceil(Math.max(...data.proportion))
      this.myChart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'none'
          },
          borderWidth: 0,
          borderColor: '#104db1',
          backgroundColor: '#104db1',
          textStyle: {
            color: '#fff'
          }
        },
        legend: {
            data: ['收入', '投入', '投入产出比'],
            orient: 'vertical',
            right: 0,
            top: 0,
            textStyle: {
                color: '#fff'
            },
        },
        xAxis: [
            {
                type: 'category',
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                axisPointer: {
                    type: 'shadow'
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                axisLabel: {
                    color: '#fff'
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '万元',
                max: Math.floor(data.maxNum / 100) * 100 + 400,
                nameTextStyle: {
                  color: '#fff'
                },
                splitLine: {
                    lineStyle: {
                        color: '#0c2f74',
                        opacity: 0.5
                    }
                },
                axisLabel: {
                    color: '#fff'
                }
            },
            {
                type: 'log',
                max: max,
                splitLine: {
                    show: false
                },
                axisLabel: {
                    show: false
                }
            }
        ],
        series: [
            {
                name: '收入',
                type: 'bar',
                itemStyle: {
                    color: '#30ccfb',
                    borderRadius: [8,8,0,0]
                },
                data: data.realIncome
            },
            {
                name: '投入',
                type: 'bar',
                itemStyle: {
                    color: '#ff690c',
                    borderRadius: [8,8,0,0]
                },
                data: data.realCost
            },
            {
                name: '投入产出比',
                type: 'line',
                yAxisIndex: 1,
                label: {
                  show: true,
                  position: 'top',
                  borderWidth: 0,
                  color: '#fff'
                },
                lineStyle: {
                    color: '#09c49a',
                    
                },
                symbolSize: 6,
                symbol: "circle",
                itemStyle: {
                    color: '#09c49a'
                },
                data: data.proportion
            }
        ]
      })
    },
    getData () {
      let tempObj = {
        realIncome: [],
        realCost: [],
        maxNum: 0,
        proportion: []
      }
      this.dataList.forEach(item => {
        if (item.project === '实际收入') {
          this.loopIcome('realIncome', tempObj, item)
        }
        if (item.project === '实际投入') {
          this.loopIcome('realCost', tempObj, item)
        }
      })
      for(let i = 0; i < 12; i++) {
        if (!tempObj.realIncome[i] || !tempObj.realCost[i]) {
          tempObj.proportion.push(1)
        } else {
          tempObj.proportion.push(Math.round(tempObj.realIncome[i] / tempObj.realCost[i] * 100) / 100)
        }
      }
      return tempObj
    },
    /* 12月循环 */
    loopIcome (key, tempObj, item) {
      for(let i = 1; i < 13; i++) {
        let value = item[this.yearValue + '-' + (i < 10 ? ('0' + i) : i)]
        if (value) {
          let num = value * 10000  / 100000000
          if (num > tempObj.maxNum) {
            tempObj.maxNum = num
          }
          tempObj[key].push(num)
        } else {
          tempObj[key].push(0)
        }
      }
    },
    chooseYaer (item) {
      this.$emit('requestData', item)
      this.yearValue = item
    },
    changeYearPage (type) {
      this.changeYearPageStatus = true
      let tempArr = []
      if (type) {
        for(let i = 0 ; i < 16 ; i++) {
          tempArr.push(this.yearList[15] + i + 1)
        }
        this.yearList = tempArr
      } else {
        for(let i = 0 ; i < 16 ; i++) {
          tempArr.unshift(this.yearList[0] - i - 1)
        }
        this.yearList = tempArr
      }
    },
    openChooseBox (type) {
      if (type) {
        this.openChoose = true
        return
      }
      let timeOut = setTimeout(() => {
        window.clearTimeout(timeOut)
        if (this.changeYearPageStatus) {
          let timeOut2 = setTimeout(() => {
            this.changeYearPageStatus = false
            this.$refs.yearInput.focus()
            window.clearTimeout(timeOut2)
          }, 200)
          return
        }
        this.openChoose = false
      }, 200)
    }
  }
}
</script>
<style scoped lang='less'>
.module {
  background-image: url(../../../../assets/chartBg/FinanceBoard2.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;

  width: 100%;
  height: 410px;

  .timeModule {
    font-size: 16px;
    font-weight: 400;
    color: #DDDDDD;

    width: 140px;
    height: 25px;
    background: #003A8C;
    border-radius: 6px;

    display: flex;
    justify-content: center;
    align-items: center;

    .timeModuleText {

    }

    .timeModuleIcon {

    }
  }
  .titleModule {
    display: flex;
    align-items: center;
    padding-top: 25px;

    .title {
      font-size: 24px;
      font-weight: 400;
      color: #E9F2F9;

      margin-left: 100px;
    }

    .datePreIcon {
      margin-left: 120px;
    }

    .dateChoose {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 140px;
      height: 25px;
      background: #003A8C;
      border-radius: 6px;
      padding: 0 5px;
      user-select: none;

      .dateText {
        font-size: 16px;
        font-weight: 400;
        color: #DDDDDD;
      }

      .dateIcon {
        width: 16px;
        height: 16px;
        background-color: #000057;
      }

    }


  }
}

</style>
